---
title: Motion Grid
description: A grid that displays animations in a grid.
author:
  name: imskyleen
  url: https://github.com/imskyleen
releaseDate: 2025-09-07
---

import { MotionGridEditor } from '@/components/docs/motion-grid-editor';

<ComponentPreview name="demo-primitives-animate-motion-grid" />

## Installation

<ComponentInstallation name="primitives-animate-motion-grid" />

## Usage

```tsx
<MotionGrid gridSize={[5, 5]} frames={frames}>
  <MotionGridCells />
</MotionGrid>
```

## Editor

<MotionGridEditor />

## API Reference

### MotionGrid

<TypeTable
  type={{
    asChild: {
      description:
        'Change the default rendered element for the one passed as a child, merging their props and behavior.',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    gridSize: {
      description: 'The size of the grid as [rows, columns].',
      type: '[number, number]',
      required: true,
    },
    frames: {
      description: 'Array of frame data for the grid.',
      type: '[number, number][][]',
      required: true,
    },
    duration: {
      description: 'The duration of the animation.',
      type: 'number',
      required: false,
      default: '200',
    },
    animate: {
      description: 'Whether the grid should animate.',
      type: 'boolean',
      required: false,
      default: 'true',
    },
    '...props': {
      description: 'The props of the MotionGrid',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
  }}
/>

### MotionGridCells

<TypeTable
  type={{
    activeProps: {
      description: 'The props of the active cell.',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
    inactiveProps: {
      description: 'The props of the inactive cell.',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
    '...props': {
      description: 'The props of the MotionGridCells',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
  }}
/>

## Credits

- Credits to [Adrien Griveau](https://x.com/Griveau) for [this X post](https://x.com/Griveau/status/1932832554354163804) as inspiration
